<template>
    <div class="service-provider-form-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>{{ isEdit ? '编辑服务商' : '新增服务商' }}</h2>
                </div>
                <div class="header-right">
                    <el-button @click="handleCancel">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 步骤指示器 -->
        <div class="step-indicator">
            <el-steps :active="currentStep + 1" align-center finish-status="primary" process-status="primary" :key="`step-${currentStep}`">
                <el-step title="基本信息" :status="currentStep >= 0 ? 'primary' : 'wait'" />
                <el-step title="资质信息" :status="currentStep >= 1 ? 'primary' : 'wait'" />
            </el-steps>
        </div>

        <!-- 表单内容 -->
        <div class="form-content">
            <el-card shadow="never" class="form-card">
                <!-- 第一步：基本信息 -->
                <div v-if="currentStep === 0" class="step-form">
                    <h3 class="step-title">基本信息</h3>
                    <el-form
                        ref="basicFormRef"
                        :model="basicForm"
                        :rules="basicFormRules"
                        label-width="120px"
                        class="service-provider-form"
                    >
                        <!-- 语言选择 -->
                        <el-form-item label="语言:" prop="language">
                            <el-select v-model="basicForm.language" placeholder="请选择语言" style="width: 200px">
                                <el-option label="中文" value="zh-CN" />
                                <el-option label="英文" value="en" />
                            </el-select>
                        </el-form-item>

                        <!-- 服务商名称 -->
                        <el-form-item label="服务商名称:" prop="name">
                            <el-input
                                v-model="basicForm.name"
                                placeholder="输入服务商名称"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 服务商类型 -->
                        <el-form-item label="服务商类型:" prop="type">
                            <el-select v-model="basicForm.type" placeholder="请选择" style="width: 200px">
                                <el-option label="机构" value="organization" />
                                <el-option label="供应商" value="supplier" />
                            </el-select>
                        </el-form-item>

                        <!-- 注册地址 -->
                        <el-form-item label="注册地址:" prop="address">
                            <el-cascader
                                v-model="basicForm.address"
                                :options="addressOptions"
                                placeholder="请选择省市区"
                                style="width: 100%; margin-bottom: 10px;"
                                :props="cascaderProps"
                                clearable
                            />
                            <el-input
                                v-model="basicForm.detailAddress"
                                placeholder="请输入详细地址"
                                style="width: 100%;"
                            />
                        </el-form-item>

                        <!-- 服务商/协会介绍 -->
                        <el-form-item label="服务商/协会介绍:">
                            <el-input
                                v-model="basicForm.description"
                                type="textarea"
                                placeholder="介绍"
                                :rows="4"
                                style="width: 100%;"
                            />
                        </el-form-item>

                        <!-- 联系人姓名 -->
                        <el-form-item label="联系人姓名:" prop="contactName">
                            <el-input
                                v-model="basicForm.contactName"
                                placeholder="输入联系人姓名"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- E-mail -->
                        <el-form-item label="E-mail:">
                            <el-input
                                v-model="basicForm.email"
                                placeholder="输入邮箱地址"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 手机号码 -->
                        <el-form-item label="手机号码:" prop="phone">
                            <el-input
                                v-model="basicForm.phone"
                                placeholder="输入手机号码"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 传真 -->
                        <el-form-item label="传真:">
                            <el-input
                                v-model="basicForm.fax"
                                placeholder="输入传真号码"
                                style="width: 300px"
                            />
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 第二步：资质信息 -->
                <div v-if="currentStep === 1" class="step-form">
                    <h3 class="step-title">组织/供应商资质</h3>
                    <el-form
                        ref="qualificationFormRef"
                        :model="qualificationForm"
                        :rules="qualificationFormRules"
                        label-width="120px"
                        class="service-provider-form"
                    >
                        <!-- 组织机构代码 -->
                        <el-form-item label="组织机构代码:" prop="orgCode">
                            <el-input
                                v-model="qualificationForm.orgCode"
                                placeholder="统一社会信用代码第9-17位"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 证件有效期 -->
                        <el-form-item label="证件有效期:">
                            <el-date-picker
                                v-model="qualificationForm.certificateValidity"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 上传证件扫描照 -->
                        <el-form-item label="上传证件扫描照:">
                            <el-upload
                                class="upload-demo"
                                action="#"
                                :before-upload="beforeUpload"
                                :on-success="handleUploadSuccess"
                            >
                                <el-button type="primary">选择文件</el-button>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        未选择任何文件
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>

                        <!-- 法人身份证 -->
                        <el-form-item label="法人身份证:">
                            <el-input
                                v-model="qualificationForm.legalIdCard"
                                placeholder="输入法人身份证号"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 法人姓名 -->
                        <el-form-item label="法人姓名:">
                            <el-input
                                v-model="qualificationForm.legalName"
                                placeholder="输入法人姓名"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 手机号 -->
                        <el-form-item label="手机号:">
                            <el-input
                                v-model="qualificationForm.legalPhone"
                                placeholder="输入法人手机号"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 卡类型 -->
                        <el-form-item label="卡类型:">
                            <el-select v-model="qualificationForm.bankType" placeholder="请选择银行" style="width: 200px">
                                <el-option label="中国银行" value="boc" />
                                <el-option label="工商银行" value="icbc" />
                                <el-option label="建设银行" value="ccb" />
                                <el-option label="农业银行" value="abc" />
                            </el-select>
                        </el-form-item>

                        <!-- 银行卡号 -->
                        <el-form-item label="银行卡号:">
                            <el-input
                                v-model="qualificationForm.bankCard"
                                placeholder="输入银行卡号"
                                style="width: 300px"
                            />
                            <span class="form-hint">(对公账号)</span>
                        </el-form-item>

                        <!-- 分隔线 -->
                        <el-divider />

                        <!-- 个体工商户资质 -->
                        <h3 class="step-title">个体工商户资质</h3>

                        <!-- 姓名 -->
                        <el-form-item label="姓名:">
                            <el-input
                                v-model="qualificationForm.individualName"
                                placeholder="输入姓名"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 身份证 -->
                        <el-form-item label="身份证:">
                            <el-input
                                v-model="qualificationForm.individualIdCard"
                                placeholder="输入身份证号"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 手机号 -->
                        <el-form-item label="手机号:">
                            <el-input
                                v-model="qualificationForm.individualPhone"
                                placeholder="输入手机号"
                                style="width: 300px"
                            />
                        </el-form-item>

                        <!-- 身份证正反面 -->
                        <el-form-item label="身份证正反面:">
                            <div class="id-card-upload">
                                <div class="id-card-item">
                                    <el-upload
                                        class="id-card-uploader"
                                        action="#"
                                        :show-file-list="false"
                                        :before-upload="beforeUpload"
                                        :on-success="handleIdCardFrontSuccess"
                                    >
                                        <div class="id-card-placeholder">
                                            <div class="placeholder-content">
                                                <div class="placeholder-text">正</div>
                                            </div>
                                        </div>
                                    </el-upload>
                                </div>
                                <div class="id-card-item">
                                    <el-upload
                                        class="id-card-uploader"
                                        action="#"
                                        :show-file-list="false"
                                        :before-upload="beforeUpload"
                                        :on-success="handleIdCardBackSuccess"
                                    >
                                        <div class="id-card-placeholder">
                                            <div class="placeholder-content">
                                                <div class="placeholder-text">反</div>
                                            </div>
                                        </div>
                                    </el-upload>
                                </div>
                            </div>
                        </el-form-item>

                        <!-- 卡类型 -->
                        <el-form-item label="卡类型:">
                            <el-select v-model="qualificationForm.individualBankType" placeholder="请选择银行" style="width: 200px">
                                <el-option label="中国银行" value="boc" />
                                <el-option label="工商银行" value="icbc" />
                                <el-option label="建设银行" value="ccb" />
                                <el-option label="农业银行" value="abc" />
                            </el-select>
                        </el-form-item>

                        <!-- 银行卡号 -->
                        <el-form-item label="银行卡号:">
                            <el-input
                                v-model="qualificationForm.individualBankCard"
                                placeholder="输入银行卡号"
                                style="width: 300px"
                            />
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 操作按钮 -->
                <div class="form-actions">
                    <el-button v-if="currentStep > 0" @click="prevStep">上一步</el-button>
                    <el-button v-if="currentStep < 1" type="primary" @click="nextStep">下一步</el-button>
                    <el-button v-if="currentStep === 1" type="success" @click="handleSubmit">提交</el-button>
                    <el-button @click="handleCancel">取消</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowLeft } from '@element-plus/icons-vue';
import { createOrg, updateOrg, getOrgById } from '@/api/system/org';

const route = useRoute();
const router = useRouter();

// 判断是否为编辑模式
const isEdit = computed(() => !!route.params.id);

// 当前步骤
const currentStep = ref(0);

// 步骤状态计算属性
const stepStatus = computed(() => {
    return {
        current: currentStep.value,
        isFirstStep: currentStep.value === 0,
        isLastStep: currentStep.value === 1
    };
});

// 表单引用
const basicFormRef = ref();
const qualificationFormRef = ref();

// 地址级联选择器配置
const cascaderProps = {
    value: 'value',
    label: 'label',
    children: 'children'
};

// 地址选项数据
const addressOptions = ref([
    {
        value: 'hunan',
        label: '湖南省',
        children: [
            {
                value: 'changsha',
                label: '长沙市',
                children: [
                    { value: 'yuhua', label: '雨花区' },
                    { value: 'kaifu', label: '开福区' },
                    { value: 'furong', label: '芙蓉区' },
                    { value: 'tianxin', label: '天心区' },
                    { value: 'yuelu', label: '岳麓区' },
                    { value: 'wangcheng', label: '望城区' }
                ]
            },
            {
                value: 'zhuzhou',
                label: '株洲市',
                children: [
                    { value: 'hetang', label: '荷塘区' },
                    { value: 'lusong', label: '芦淞区' },
                    { value: 'shifeng', label: '石峰区' },
                    { value: 'tianyuan', label: '天元区' }
                ]
            }
        ]
    },
    {
        value: 'guangdong',
        label: '广东省',
        children: [
            {
                value: 'guangzhou',
                label: '广州市',
                children: [
                    { value: 'tianhe', label: '天河区' },
                    { value: 'yuexiu', label: '越秀区' },
                    { value: 'haizhu', label: '海珠区' },
                    { value: 'liwan', label: '荔湾区' }
                ]
            },
            {
                value: 'shenzhen',
                label: '深圳市',
                children: [
                    { value: 'futian', label: '福田区' },
                    { value: 'luohu', label: '罗湖区' },
                    { value: 'nanshan', label: '南山区' },
                    { value: 'yantian', label: '盐田区' }
                ]
            }
        ]
    },
    {
        value: 'beijing',
        label: '北京市',
        children: [
            {
                value: 'beijing_city',
                label: '北京市',
                children: [
                    { value: 'dongcheng', label: '东城区' },
                    { value: 'xicheng', label: '西城区' },
                    { value: 'chaoyang', label: '朝阳区' },
                    { value: 'haidian', label: '海淀区' },
                    { value: 'fengtai', label: '丰台区' },
                    { value: 'shijingshan', label: '石景山区' }
                ]
            }
        ]
    },
    {
        value: 'shanghai',
        label: '上海市',
        children: [
            {
                value: 'shanghai_city',
                label: '上海市',
                children: [
                    { value: 'huangpu', label: '黄浦区' },
                    { value: 'xuhui', label: '徐汇区' },
                    { value: 'changning', label: '长宁区' },
                    { value: 'jingan', label: '静安区' },
                    { value: 'putuo', label: '普陀区' },
                    { value: 'hongkou', label: '虹口区' }
                ]
            }
        ]
    }
]);

// 基本信息表单数据
const basicForm = reactive({
    language: 'zh-CN',
    name: '道许一家协会',
    type: 'organization',
    address: ['湖南省', '长沙市', '雨花区'],
    detailAddress: '长沙市雨花区砂子塘小区',
    description: '供应商介绍,成立多少年',
    contactName: '张三',
    email: '929144387@qq.com',
    phone: '13800138000',
    fax: '0731-88888888'
});

// 资质信息表单数据
const qualificationForm = reactive({
    orgCode: '1234567890',
    certificateValidity: [],
    certificateFile: '证件图片.jpeg',
    legalIdCard: '43112119900877874445',
    legalName: '张三',
    legalPhone: '13800138000',
    bankType: '中国银行',
    bankCard: '621700001234567890',
    individualName: '张三',
    individualIdCard: '43112119900877874445',
    individualPhone: '13800138000',
    individualBankType: '中国银行',
    individualBankCard: '621700001234567890',
    idCardFront: '',
    idCardBack: ''
});

// 基本信息表单验证规则
const basicFormRules = {
    language: [
        { required: true, message: '请选择语言', trigger: 'change' }
    ],
    name: [
        { required: true, message: '请输入服务商名称', trigger: 'blur' },
        { min: 4, max: 14, message: '服务商名称长度在4-14个字符', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择服务商类型', trigger: 'change' }
    ],
    address: [
        { required: true, message: '请选择省市区', trigger: 'change' }
    ],
    detailAddress: [
        { required: true, message: '请输入详细地址', trigger: 'blur' }
    ],
    contactName: [
        { required: true, message: '请输入联系人姓名', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ],
    email: [],
    description: [],
    fax: []
};

// 资质信息表单验证规则
const qualificationFormRules = {
    orgCode: [
        { required: true, message: '请输入组织机构代码', trigger: 'blur' }
    ],
    certificateValidity: [],
    certificateFile: [],
    legalIdCard: [],
    legalName: [],
    legalPhone: [],
    bankType: [],
    bankCard: [],
    individualName: [],
    individualIdCard: [],
    individualPhone: [],
    individualBankType: [],
    individualBankCard: [],
    idCardImages: []
};

// 下一步
const nextStep = async () => {
    try {
        await basicFormRef.value.validate();
        currentStep.value = 1;
        await nextTick(); // 等待DOM更新
    } catch (error) {
        ElMessage.error('请检查基本信息表单');
    }
};

// 上一步
const prevStep = async () => {
    currentStep.value = 0;
    await nextTick(); // 等待DOM更新
};

// 文件上传前处理
const beforeUpload = (file: File) => {
    const isImage = file.type.startsWith('image/');
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isImage) {
        ElMessage.error('只能上传图片文件!');
        return false;
    }
    if (!isLt2M) {
        ElMessage.error('图片大小不能超过 2MB!');
        return false;
    }
    return true;
};

// 文件上传成功
const handleUploadSuccess = (response: any, file: any) => {
    qualificationForm.certificateFile = file.name;
    ElMessage.success('文件上传成功');
};

// 身份证正面上传成功
const handleIdCardFrontSuccess = (response: any, file: any) => {
    qualificationForm.idCardFront = file.name;
    ElMessage.success('身份证正面上传成功');
};

// 身份证反面上传成功
const handleIdCardBackSuccess = (response: any, file: any) => {
    qualificationForm.idCardBack = file.name;
    ElMessage.success('身份证反面上传成功');
};

// 将表单数据转换为API参数格式
const convertFormToApiData = () => {
    // 处理地址信息
    const addressArray = basicForm.address || [];
    const province = addressArray[0] || '';
    const city = addressArray[1] || '';
    const district = addressArray[2] || '';
    
    // 处理证件有效期
    const certificateValidity = qualificationForm.certificateValidity || [];
    const certificateStartTime = certificateValidity[0] ? new Date(certificateValidity[0]).toISOString() : '';
    const certificateEndTime = certificateValidity[1] ? new Date(certificateValidity[1]).toISOString() : '';
    
    // 判断服务商性质：如果有个体工商户信息，则为个体户，否则为公司
    const serviceProviderNature = qualificationForm.individualName ? 2 : 1;
    
    return {
        // 基本信息
        serviceProviderName: basicForm.name,
        serviceProviderType: basicForm.type === 'organization' ? 1 : 2,
        serviceProviderNature: serviceProviderNature,
        serviceProviderDescription: basicForm.description,
        contactName: basicForm.contactName,
        contactPhone: basicForm.phone,
        contactEmail: basicForm.email,
        fax: basicForm.fax,
        
        // 地址信息
        country: '中国',
        province: province,
        city: city,
        district: district,
        detailedAddress: basicForm.detailAddress,
        
        // 资质信息
        organizationCode: qualificationForm.orgCode,
        certificateStartTime: certificateStartTime,
        certificateEndTime: certificateEndTime,
        
        // 法人信息
        legalRepresentativeName: qualificationForm.legalName,
        legalRepresentativeIdCard: qualificationForm.legalIdCard,
        legalRepresentativePhone: qualificationForm.legalPhone,
        
        // 银行信息
        bankCardType: qualificationForm.bankType,
        bankCardNumber: qualificationForm.bankCard,
        
        // 个体工商户信息（如果存在）
        ...(serviceProviderNature === 2 && {
            individualName: qualificationForm.individualName,
            individualIdCard: qualificationForm.individualIdCard,
            individualPhone: qualificationForm.individualPhone,
            individualBankType: qualificationForm.individualBankType,
            individualBankCard: qualificationForm.individualBankCard
        }),
        
        // 默认值
        status: 1,
        sortOrderValue: 1,
        permissions: '0000',
        approvalStatus: 0,
        isRecommended: 0,
        commissionRate: 0,
        language: basicForm.language
    };
};

// 将API数据转换为表单格式
const convertApiToFormData = (apiData: any) => {
    // 基本信息
    basicForm.language = apiData.language || 'zh-CN';
    basicForm.name = apiData.serviceProviderName || '';
    basicForm.type = apiData.serviceProviderType === 1 ? 'organization' : 'supplier';
    basicForm.description = apiData.serviceProviderDescription || '';
    basicForm.contactName = apiData.contactName || '';
    basicForm.phone = apiData.contactPhone || '';
    basicForm.email = apiData.contactEmail || '';
    basicForm.fax = apiData.fax || '';
    
    // 地址信息
    basicForm.address = [apiData.province, apiData.city, apiData.district].filter(Boolean);
    basicForm.detailAddress = apiData.detailedAddress || '';
    
    // 资质信息
    qualificationForm.orgCode = apiData.organizationCode || '';
    if (apiData.certificateStartTime && apiData.certificateEndTime) {
        qualificationForm.certificateValidity = [
            apiData.certificateStartTime.split('T')[0],
            apiData.certificateEndTime.split('T')[0]
        ];
    }
    
    // 法人信息
    qualificationForm.legalName = apiData.legalRepresentativeName || '';
    qualificationForm.legalIdCard = apiData.legalRepresentativeIdCard || '';
    qualificationForm.legalPhone = apiData.legalRepresentativePhone || '';
    
    // 银行信息
    qualificationForm.bankType = apiData.bankCardType || '';
    qualificationForm.bankCard = apiData.bankCardNumber || '';
    
    // 个体工商户信息
    if (apiData.serviceProviderNature === 2) {
        qualificationForm.individualName = apiData.individualName || '';
        qualificationForm.individualIdCard = apiData.individualIdCard || '';
        qualificationForm.individualPhone = apiData.individualPhone || '';
        qualificationForm.individualBankType = apiData.individualBankType || '';
        qualificationForm.individualBankCard = apiData.individualBankCard || '';
    }
};

// 提交表单
const handleSubmit = async () => {
    try {
        await qualificationFormRef.value.validate();
        
        // 转换表单数据为API格式
        const apiData = convertFormToApiData();
        
        if (isEdit.value) {
            // 编辑模式：调用更新接口
            const id = route.params.id as string;
            await updateOrg({ id, ...apiData });
            ElMessage.success('编辑成功');
        } else {
            // 新增模式：调用创建接口
            await createOrg(apiData);
            ElMessage.success('新增成功');
        }
        
        // 返回列表页
        router.push('/service-provider-main');
    } catch (error) {
        console.error('提交失败:', error);
        ElMessage.error('提交失败，请稍后重试');
    }
};

// 取消操作
const handleCancel = () => {
    ElMessageBox.confirm(
        '确定要离开吗？未保存的内容将丢失。',
        '确认离开',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        router.push('/service-provider-main');
    }).catch(() => {
        // 用户取消
    });
};

// 加载机构详情数据
const loadOrgDetail = async (id: string) => {
    try {
        const response = await getOrgById(id);
        
        if (response && response.data) {
            // 将API数据转换为表单格式
            convertApiToFormData(response.data);
        }
    } catch (error) {
        console.error('加载机构详情失败:', error);
        ElMessage.error('加载数据失败，请稍后重试');
    }
};

// 页面初始化
onMounted(() => {
    if (isEdit.value) {
        // 编辑模式，加载数据
        const id = route.params.id as string;
        loadOrgDetail(id);
    }
});

// 页面离开前确认
onBeforeRouteLeave((to, from, next) => {
    // 如果是要跳转到服务商列表页，直接允许
    if (to.path === '/service-provider-main') {
        next();
        return;
    }
    
    ElMessageBox.confirm(
        '确定要离开吗？未保存的内容将丢失。',
        '确认离开',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        next();
    }).catch(() => {
        next(false);
    });
});
</script>

<style scoped>
.service-provider-form-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 页面头部 */
.page-header {
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 步骤指示器 */
.step-indicator {
    margin-bottom: 30px;
}

/* 强制设置步骤条为蓝色主题 */
:deep(.el-steps .el-step__head.is-primary) {
    color: #409eff;
    border-color: #409eff;
}

:deep(.el-steps .el-step__head.is-primary .el-step__icon) {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}

:deep(.el-steps .el-step__head.is-primary .el-step__icon.is-text) {
    background-color: #409eff;
    border-color: #409eff;
    color: #fff;
}

:deep(.el-steps .el-step__title.is-primary) {
    color: #409eff;
}

:deep(.el-steps .el-step__line.is-primary) {
    background-color: #409eff;
}

:deep(.el-steps .el-step__line) {
    background-color: #e4e7ed;
}

/* 表单内容 */
.form-card {
    border-radius: 8px;
}

.step-form {
    padding: 20px;
}

.step-title {
    color: #303133;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #409eff;
}

.service-provider-form {
    max-width: 800px;
}


/* 表单提示 */
.form-hint {
    color: #f56c6c;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 8px;
}

/* 身份证上传 */
.id-card-upload {
    display: flex;
    gap: 20px;
    width: 100%;
}

.id-card-item {
    flex: 1;
    max-width: 200px;
}

.id-card-uploader {
    width: 100%;
}

.id-card-placeholder {
    width: 100%;
    height: 120px;
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s;
    background-color: #fafafa;
    position: relative;
}

.id-card-placeholder:hover {
    border-color: #409eff;
    background-color: #f0f9ff;
}

.placeholder-content {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.placeholder-text {
    font-size: 32px;
    color: #666;
    font-weight: bold;
    user-select: none;
}

/* 操作按钮 */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

/* 表单项样式 */
:deep(.el-form-item__label) {
    font-weight: 600;
    color: #303133;
}

/* 只对有prop属性的表单项显示星号 */
:deep(.el-form-item[class*="is-required"] .el-form-item__label::before) {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}

/* 隐藏没有prop属性的表单项的星号 */
:deep(.el-form-item:not([class*="is-required"]) .el-form-item__label::before) {
    display: none;
}

/* 上传组件样式 */
:deep(.el-upload) {
    display: block;
}

:deep(.el-upload__tip) {
    color: #909399;
    font-size: 12px;
    margin-top: 5px;
}

/* 分隔线样式 */
:deep(.el-divider) {
    margin: 30px 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .service-provider-form-container {
        padding: 10px;
    }
    
    .step-form {
        padding: 15px;
    }
    
    
    .id-card-upload {
        flex-direction: column;
        gap: 15px;
    }
    
    .id-card-item {
        max-width: 100%;
    }
    
    .id-card-placeholder {
        height: 100px;
    }
    
    .placeholder-text {
        font-size: 28px;
    }
    
    .form-actions {
        flex-direction: column;
        align-items: center;
    }
}
</style>
